<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-07-18 18:31:00
-->
<template>
  <div v-if="spuDetailData?.id">
    <el-form label-width="80px" label-suffix=":">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" :disabled="true" v-model="spuDetailData.spuName" />
      </el-form-item>

      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="saveSkuParams.skuName" />
      </el-form-item>

      <el-form-item label="价格">
        <el-input placeholder="价格" type="number" v-model="saveSkuParams.price" />
      </el-form-item>

      <el-form-item label="重量">
        <el-input placeholder="重量" type="number" v-model="saveSkuParams.weight" />
      </el-form-item>

      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" rows="4" v-model="saveSkuParams.skuDesc" />
      </el-form-item>

      <el-form-item label="平台属性">
        <el-form inline label-width="80px">
          <el-form-item v-for="attr in attrInfoList" :key="attr.id" :label="attr.attrName">
            <el-select v-model="attr.selectAttr" :placeholder="`请选择${attr.attrName}`">
              <el-option
                v-for="item in attr.attrValueList"
                :key="item.id"
                :label="item.valueName"
                :value="`${item.attrId}:${item.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="销售属性">
        <el-form inline label-width="80px">
          <el-form-item
            v-for="saleAttr in spuDetailData.spuSaleAttrList"
            :key="saleAttr.id"
            :label="saleAttr.saleAttrName"
          >
            <el-select
              v-model="saleAttr.selectSaleAttr"
              :placeholder="`请选择${saleAttr.saleAttrName}`"
            >
              <el-option
                v-for="item in saleAttr.spuSaleAttrValueList"
                :key="item.id"
                :label="item.saleAttrValueName"
                :value="`${item.spuId}:${item.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>

      <el-form-item label="图片列表">
        <el-table
          :data="spuImageList"
          stripe
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="图片">
            <template #default="{ row }">
              <el-image style="width: 100px; height: 100px" :src="row.imgUrl" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button v-if="!row.isDefault" type="primary" @click="setDefaultImg(row)"
                >设为默认</el-button
              >
              <el-tag v-else class="ml-2" type="success">默认图片</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSku">确定</el-button>
        <el-button @click="cancelAddSku">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reqAttrInfoList } from '@/api/attr'
import { reqSaveSku } from '@/api/sku'
import { reqSpuDetail, reqSpuImageList } from '@/api/spu'
import { useAttrStore } from '@/stores/attr'
import type { IAttrInfoList } from '@/types/attr'
import type { ISkuDetailPublic } from '@/types/sku'
import type { ISpuImageList, ISpuPublic } from '@/types/spu'
import { ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'

const emit = defineEmits<{
  (e: 'setState', id: number): void
}>()

const props = defineProps<{
  spuId: string | number
}>()
const attrStore = useAttrStore()
const { category1Id, category2Id, category3Id } = storeToRefs(attrStore)

// 添加sku需要的参数
const saveSkuParams = ref<ISkuDetailPublic>({
  spuId: '',
  price: '',
  skuName: '',
  skuDesc: '',
  weight: '',
  tmId: '',
  category3Id: category3Id.value as number,
  skuDefaultImg: '',
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})

const addSku = async () => {
  saveSkuParams.value.spuId = props.spuId
  saveSkuParams.value.tmId = spuDetailData.value?.tmId as number
  attrInfoList.value.forEach((item) => {
    if (item.selectAttr) {
      const [attrId, valueId] = item.selectAttr.split(':')
      saveSkuParams.value.skuAttrValueList.push({
        attrId: Number(attrId),
        valueId: Number(valueId)
      })
    }
  })
  spuDetailData.value?.spuSaleAttrList.forEach((item) => {
    if (item.selectSaleAttr) {
      const [saleAttrId, saleAttrValueId] = item.selectSaleAttr.split(':')
      saveSkuParams.value.skuSaleAttrValueList.push({
        saleAttrId: Number(saleAttrId),
        saleAttrValueId: Number(saleAttrValueId)
      })
    }
  })

  const res = await reqSaveSku(saveSkuParams.value)
  if (res.code === 200) {
    ElMessage.success('添加成功')
    emit('setState', 1)
  }
}

const handleSelectionChange = (val: ISpuImageList[]) => {
  saveSkuParams.value.skuImageList = val
}
const setDefaultImg = (row: ISpuImageList) => {
  spuImageList.value.forEach((item) => (item.isDefault = false))
  row.isDefault = true
  saveSkuParams.value.skuDefaultImg = row.imgUrl
}

//#region 渲染数据
// spu的数据
const spuDetailData = ref<ISpuPublic>()

// 平台属性列表
const attrInfoList = ref<IAttrInfoList[]>([])

// 图片列表
const spuImageList = ref<ISpuImageList[]>([])

// 获取添加sku需要的数据
const getAllAddSkuData = async () => {
  const [res1, res2, res3] = await Promise.all([
    reqSpuDetail(props.spuId as number),
    reqAttrInfoList(
      category1Id.value as number,
      category2Id.value as number,
      category3Id.value as number
    ),
    reqSpuImageList(props.spuId as number)
  ])
  if (res1.code === 200 && res2.code === 200 && res3.code === 200) {
    spuDetailData.value = res1.data
    attrInfoList.value = res2.data
    spuImageList.value = res3.data
  }
}
onMounted(() => {
  getAllAddSkuData()
})
//#endregion

// 取消按钮
const cancelAddSku = () => {
  emit('setState', 1)
}
</script>

<script lang="ts">
export default {
  name: 'SkuFrom'
}
</script>

<style lang="scss" scoped></style>
